<template>
  <div>
    <el-collapse>
      <el-collapse-item title="折线样式" name="1">
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">颜色</p>
          <div class="col-1 attr-item-edit-input">
            <el-input placeholder="请输入内容" v-model="num" size="mini" class="input-with-select">
            </el-input>
            <el-color-picker class="colorChoose" size="mini" v-model="color1"></el-color-picker>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">颜色</p>
          <div class="col-2 attr-item-edit-input">
            <el-input placeholder="请输入内容" v-model="num" size="mini" class="input-with-select">
            </el-input>
            <el-color-picker class="colorChoose" size="mini" v-model="color1"></el-color-picker>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">粗细</p>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="col-3 attr-item-edit-input textRight">
            曲线平滑
          </div>
          <div class="col-3 attr-item-edit-input textLeft">
            <el-switch v-model="num" size="mini">
            </el-switch>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title"></p>
          <div class="col-1 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">数据点标记</p>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">数据值显示</p>
          <div class="col-1 attr-item-edit-input">
            <div class="col-3 attr-item-edit-input textLeft">
              <el-switch v-model="num" size="mini">
              </el-switch>
            </div>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">文本样式</p>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title"></p>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-select v-model="demoStyle[0].label" @change="throttleAddHistory" size="mini">
              <el-option v-for="item in demoStyle" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

  </div>

</template>

<script>

	export default {
		name: "attr-qk-lineSimpleForm",
		props: {
			// lineSimple: Object
		},
		components: {
		},
		data() {
			return {
				tempValue: '',
				num:500,
        demoStyle:[
          {label:'10px',value:1},
          {label:'12px',value:2},
          {label:'14px',value:3}


        ],
				// activeNames: ['2'],
				alignTypeList: [{
					title: '左对齐',
					icon: 'iconfont iconzuoduiqi',
					type: 'l'
				}, {
					title: '上对齐',
					icon: 'iconfont iconshangduiqi',
					type: 't'
				}, {
					title: '右对齐',
					icon: 'iconfont iconyouduiqi',
					type: 'r'
				}, {
					title: '下对齐',
					icon: 'iconfont iconxiaduiqi',
					type: 'b'
				}, {
					title: '垂直居中对齐',
					icon: 'iconfont iconchuizhijuzhongduiqi',
					type: 'tb'
				}, {
					title: '水平居中对齐',
					icon: 'iconfont iconshuipingjuzhongduiqi',
					type: 'lr'
				}],
				// 'none', 'solid', 'dashed', 'dotted', 'double'
				borderStyleList: [{
					label: '实线',
					value: 'solid'
				}, {
					label: '虚线',
					value: 'dashed'
				}, {
					label: '点状',
					value: 'dotted'
				}, {
					label: '双线',
					value: 'double'
				}],
				boxShadow: {
					h: 0,
					v: 0,
					blur: 0,
					spread: 0,
					color: '#000000'
				}
			}
		},
		mounted() {

		},
		created() {
		},
		watch: {
			imageSrc(val) {
				this.tempValue = val;
			},
			tempValue() {
				this.$emit('update:imageSrc', this.tempValue);
			}
		}
	}
</script>
<style lang="scss">
// .el-select{
//   width: 100%;
// }
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 190px;
        margin-left: 10px;

      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>